<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>模窗口组件示例:</title>

<!--一个基于flexbox的布局类库-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">


<style type="text/css">



</style>

</head>



  <!--

  v-on:事件="XXX", xxx为函数或表达式,函数需要在vue变量里面定义才能找得到,表达式的变量同样需要在vue里面定义;


  -->


<body>


<div id="root"  class="container">

<button type="button" name="button" @click="isShowModal=true">显示模态窗口</button>


<!-- 组件 -->

<!--
'close'事件是modal控件负责发射的,作用域在组件范围内,外面节点接收不到
-->

<modal v-show="isShowModal" v-if="isShowModal" @close="isShowModal=false">这是一个模态窗口~~~~~</modal>

</div>



<!-- vue -->
<!-- <script src="https://unpkg.com/vue@2.4.2"></script> -->
<script src="./js/vue2.4.2.js"></script>

<!--
    引入组件
  -->
<script src="./exerciseJS/component_modal.js" >  </script>

  </body>
</html>
